* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
html {
    font-size: 100px;
}
body {
    font-size: 14px;
    background-color: #f1f1f1;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
}
@media (max-width:375px) {
    html {
        font-size: 100px;
    }
}
@media (max-width:320px) {
    html {
        font-size: 80px;
    }
}
.m-header {
    position: relative;
    height: 0.48rem;
    line-height: 0.48rem;
    font-size: 0.16rem;
    border-bottom: 2px solid #EBEBEB;
    text-align: center;
    color: #2C2C2C;
    letter-spacing: 0;
    background: #fff;
}
.margin-top {
    display: inline-block;
    padding-top: .2rem;
}
.m-return {
    position: absolute;
    display: inline-block;
    top: 0.13rem;
    left: 0.12rem;
    width: 0.14rem;
    height: 0.22rem;
    background-image: url(http://c2.cgyouxi.com/website/mobile/img/arrow-l.png?v=20180122);
    background-size: 100% 100%;
}
.particulars {
    height: 1.3rem;
    border-radius: 10px;
    background-color: #fff;
}
.particulars11 div {
    float: left;
}
.particulars div {
    float: left;
}
.typeface {
    width: 25%;
    height: 1.3rem;
}
.typeface22 {
    width: 25%;
    height: 1.5rem;
}
.message {
    width: 35%;
    height: 1.3rem;
    font-size: 12px;
}
.Up-img {
    width: 5%;
    height: 1.3rem;
}
.enshrine {
    width: 31%;
    height: 1.3rem;
}
.border {
    width: 70%;
    height: .65rem;
    border-radius: 10px;
    margin-left: 10%;
    margin-top: .25rem;
    background-color: #8B2FAA;
    border: 4px solid #F93AE2;
}

.border span {
    display: block;
    text-align: center;
    line-height: .65rem;
    color: #fff;
    font-weight: bold;
    font-size: 40px;
}

.message span {
    line-height: .3rem;
    font-size: 12px;
}

.Up-img11 {
    width: 100%;
    height: .2rem;
    margin-top: .52rem;
}

.Up-img11 img {
    width: 100%;
    height: 100%;
}

.sell {
    color: red;
}

.residue {
    color: red;
}

.enshrine-img {
    height: .4rem;
    margin: 0 auto;
    margin-top: .48rem;
    margin-left: 15%;
}

.enshrine-img div {
    float: left;
}

.collect {
    width: 35%;
    height: .3rem;
    margin-left: 10%;
}
.collect img {
    width: 100%;
    height: 100%;
}
.acting-load {
    width: 35%;
    height: .3rem;
    margin-left: 10%;
}
.acting-load img {
    width: 100%;
    height: 100%;
}
.market {
    height: 2.5rem;
    margin-top: 10px;
    background-color: #fff;
}
.current-period {
    height: .5rem;
}
.current-period b {
    line-height: .5rem;
    font-size: 20px;
    padding-left: 5%;
}
.trend-chart {
    height: 1.98rem;
    border: 1px solid#ccc;
}
.for-sale {
    margin-top: 10px;
    background-color: #fff;
}
.In-selling {
    height: .5rem;
    /* border-bottom: 1px solid #ccc; */
}
.In-selling b {
    line-height: .5rem;
    font-size: 20px;
    padding-left: 5%;
}
.information-sheet {
    width: 90%;
    height: 2.45rem;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
}
.information-sheet div {
    width: 100%;
    height: .6rem;
}
.price div {
    float: left;
    width: 49.5%;
    height: .6rem;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    line-height: .6rem;
}
.Buy-to-sell {
    height: .5rem;
    margin-top: 20px;
}
.Buy-to-sell div {
    float: left;
}
.purchase {
    width: 40%;
    height: .5rem;
    border-radius: 25px;
    margin-left: 7%;
    background-color: red;
}
.purchase b {
    display: block;
    text-align: center;
    line-height: .5rem;
    font-size: 18px;
    color: #fff;
}
.show-off {
    margin-left: 5%;
    width: 40%;
    height: .5rem;
    border-radius: 25px;
    background-color: green;
}
.show-off b {
    display: block;
    text-align: center;
    line-height: .5rem;
    font-size: 18px;
    color: #fff;
}
/* .................................................................. */
/* 遮罩层样式 */
.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .50;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 7%;
    width: 85%;
    border: 1px solid lightblue;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    border-radius: 10px;
}
.white_content_small {
    display: none;
    position: absolute;
    top: 20%;
    left: 30%;
    width: 40%;
    height: 50%;
    border: 1px solid lightblue;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}
.countermand {
    width: 100%;
    height: 40px;
    background: -webkit-linear-gradient(left, #ef2f37, #f45d5f, #ff7a56);
    cursor: default;
}
.countermand span {
    color: #fff;
    line-height: 40px;
    padding-left: 85%;
    font-size: 16px;
}
/* .................................................................................. */
.quantity {
    width: 100%;
    height: .75rem;
    /* border: 1px solid green; */
    margin-top: .2rem;
    display: flex;
    justify-content: center;
}
.possess {
    width: 1.5rem;
    height: .75rem;
    /* border: 1px solid green; */
    margin-left: .6rem;
}
.character {
    width: .7rem;
    height: .68rem;
    background-color: #8B2FAA;
    border: 4px solid #F93AE2;
    border-radius: 10px;
}
.character span {
    display: block;
    text-align: center;
    line-height: .68rem;
    font-size: 40px;
    font-weight: 600;
    color: #fff;
}
.magnitude {
    padding-left: 5px;
    font-size: 12px;
}
.bottom {
    display: inline-block;
    padding-top: .55rem;
    padding-left: 5px;
}
.subtract {
    width: 84%;
    height:.3rem;
    margin-left: 10%;
    margin-top: .2rem;
}
.subtract11 {
    width: 90%;
    height:.3rem;
    margin-left: 5%;
    margin-top: .2rem;
    /* border: 1px solid red; */
}
.subtract div {
float: left;
}
.minimum {
    width: .5rem;
    height: .3rem;
    border: 1px solid #ccc;
    border-radius: 25px;
}
.minimum span {
    display: block;
    text-align: center;
    line-height: .3rem;
    
}
.subtraction-sign {
    width: .3rem;
    height: .3rem;
    border-radius: 100%;
    background-color: red;
    position: relative;
    left: .1rem;
}
.subtraction-sign11 {
    width: .4rem;
    height: .3rem;
    background-color: red;
    margin-left: .1rem;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.subtraction-sign11 span {
    display: block;
    text-align: center;
    line-height:.3rem;
    color: #fff;
    font-size:.1rem; 
}
.subtraction-sign span {
    display:inline-block;
    line-height:.3rem;
    padding-left: .06rem;
    color: #fff;
}
.number-one {
    width:.95rem;
    height: .3rem;
    background-color: #999;
}
.number-one22 {
    width:.8rem;
    height: .3rem;
    background-color: #999;
}
.number-one22 span {
    display: block;
    text-align: center;
    line-height: .3rem;
    color: #fff;
}
.number-one span {
    display: block;
    text-align: center;
    line-height: .3rem;
    color: #fff;
}
.plus-sign {
    width: .3rem;
    height: .3rem;
    /* border: 1px solid red; */
    border-radius: 100%;
    background-color: red;
    position: relative;
    left: -.1rem;
}
.plus-sign11 {
    width: .4rem;
    height: .3rem;
    background-color: red;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
}
.plus-sign11 span {
    display:block;
    text-align: center;
    line-height:.3rem;
    color: #fff;
    font-size: .1rem;
}
.plus-sign span {
    display:block;
    text-align: center;
    line-height:.25rem;
    color: #fff;
    font-size: .3rem;
}
.maximum {
    display: inline-block;
    width: .5rem;
    height: .3rem;
    border-radius: 25px;
    background-color:green;
}
.maximum11 {
    display: inline-block;
    width: .5rem;
    height: .3rem;
    border-radius: 25px;
    background-color: green;
    margin-left: .1rem;
}
.maximum11 span {
 display: block;
 text-align: center;
 line-height: .3rem;
 color: #fff;
}
.maximum span {
    display: block;
    text-align: center;
    line-height: .3rem;
    color: #fff;
}
.putaway {
     width: 100%;
     height:.3rem;
    text-align: center;
    line-height: .3rem;
    font-size: 16px;
    font-weight: bold;
   margin-top: .2rem;
}
.putaway-two {
    width: 100%;
    height:.3rem;
    text-align: center;
    line-height: .3rem;
    font-size: 16px;
   margin-top: .2rem;
}
/* 时间表 */
.schedule-time-table {
display: flex;
justify-content: center;
align-items:center;
 width: 70%;
 height: 0.5rem;
 margin-left: 12%;
}
.schedule-time-table div {
    float: left;
    width: .5rem;
    height: .3rem;
    border: 1px solid #ccc;
    margin-left: 10%;
    border-radius: 10px;
}
.schedule-time-table div span {
    display: block;
    text-align: center;
    line-height: .3rem;
    font-size: .12px;
}
.background-color {
    background-color:red;
}
.background-color span {
    color: #fff;
}
.average {
   width: 80%;
   height: .5rem;
   margin-top: .2rem;
   margin-left: 10%;
   text-align: center;
   line-height: .5rem;
   font-size:.2rem;
   color: #fff;
   background: -webkit-linear-gradient(left, #ef2f37, #f45d5f, #ff7a56);
   border-radius: 10px;
}
.reminder {
    width: 100%;
    height: .4rem;
    margin-top: .2rem;
}
.plus-or-minus {
    display: block;
    text-align: center;
    color: #999;
    font-size:.12rem;
}
.service-charge {
    display: block;
    text-align: center;
    color: #999;
    font-size:.12rem;
}
.predict {
    width: 100%;
    height: .2rem;
}
 .need-want {
    display: inline-block;
    padding-left: 33%;
}
.character-color {
    color: red;
}
